<template>
  <page-view :avatar="avatar" :title="false" style="width: 100%;background-color: #FFF;margin-bottom: 20px;">
    <div slot="headerContent" style="padding-top: 0px;">
      <!-- <div class="title">{{ timeFix }}，{{ user.name }}<span class="welcome-text">，{{ welcome }}</span></div> -->
      <div class="title" style="margin-top: 8px;">{{ user.name }}<span class="welcome-text"></span></div>
      <div style="margin-bottom:10px;margin-top: -10px;">2022年12月25日，星期五</div>
    </div>
    <div slot="extra">
      <div style="display: flex;padding-bottom: 10px;padding-top: 0px;">
        <div class="box1" style="background: linear-gradient(90deg, #64A0F8 0%, #64A0F8 100%);">
            <div style="color: #fff;font-size: 16px;text-align: left;padding-top: 5px;padding-left: 5px;">客房送物</div>
            <div style="color: #fff;font-size: 22px;text-decoration:underline;">1条</div>
        </div>

        <div class="box1" style="background: linear-gradient(90deg, #75C9CA 0%, #75C9CA 100%);margin-left: 10px;">
          <div style="color: #fff;font-size: 16px;text-align: left;padding-top: 5px;padding-left: 5px;">清扫服务</div>
          <div style="color: #fff;font-size: 22px;">暂无</div>
        </div>

        <div class="box1" style="background: linear-gradient(90deg, #7BC97E 0%, #7BC97E 100%);margin-left: 10px;">
          <div style="color: #fff;font-size: 16px;text-align: left;padding-top: 5px;padding-left: 5px;">退房服务</div>
          <div style="color: #fff;font-size: 22px;">暂无</div>
        </div>

        <div class="box1" style="background: linear-gradient(90deg, #64A0F8 0%, #64A0F8 100%);margin-left: 10px;">
          <div style="color: #fff;font-size: 16px;text-align: left;padding-top: 5px;padding-left: 5px;">维修服务</div>
          <div style="color: #fff;font-size: 22px;">暂无</div>
        </div>

        <div class="box1" style="background: linear-gradient(90deg, #E2727F 0%, #E2727F 100%);margin-left: 10px;">
          <div style="color: #fff;font-size: 16px;text-align: left;padding-top: 5px;padding-left: 5px;">开票申请</div>
          <div style="color: #fff;font-size: 22px;">暂无</div>
        </div>

        <div class="box1" style="background: linear-gradient(90deg, #9166DE 0%, #9166DE 100%);margin-left: 10px;">
          <div style="color: #fff;font-size: 16px;text-align: left;padding-top: 5px;padding-left: 5px;">购物订单</div>
          <div style="color: #fff;font-size: 22px;">暂无</div>
        </div>

        <div class="box1" style="background: linear-gradient(90deg, #7BC97E 0%, #7BC97E 100%);margin-left: 10px;">
          <div style="color: #fff;font-size: 16px;text-align: left;padding-top: 5px;padding-left: 5px;">盒子补货</div>
          <div style="color: #fff;font-size: 22px;text-decoration:underline;">1条</div>
        </div>

      </div>

    </div>

    <div style="border: solid 1px #64A0F8;border-radius: 10px;">
      <div style="display: flex;width: 100%;padding-top: 10px;padding-left: 10px;padding-bottom: 10px;">
        <div style="width: 50%;font-weight: 600;">服务工单</div>
        <div style="width: 50%;text-align: right;text-decoration:underline;padding-right: 10px;">查看全部</div>
      </div>
      <div class="ant-table-wrapper">
        <a-table
          row-key="index"
          size="small"
          :columns="searchTableColumns"
          :dataSource="searchData"
          :pagination="{ pageSize: 5 }"
        >
          <span slot="range" slot-scope="text, record">
            <trend :flag="record.status === 0 ? 'up' : 'down'">
              {{ text }}%
            </trend>
          </span>
        </a-table>
      </div>
    </div>
    <div style="border: solid 1px #9166DE;border-radius: 10px;margin-top: 20px;">
      <div style="display: flex;width: 100%;padding-top: 10px;padding-left: 10px;padding-bottom: 10px;">
        <div style="width: 50%;font-weight: 600;">购物订单</div>
        <div style="width: 50%;text-align: right;text-decoration:underline;padding-right: 10px;">查看全部</div>
      </div>
      <div class="ant-table-wrapper">
        <a-table
          row-key="index"
          size="small"
          :columns="searchTableColumns"
          :dataSource="searchData"
          :pagination="{ pageSize: 5 }"
        >
          <span slot="range" slot-scope="text, record">
            <trend :flag="record.status === 0 ? 'up' : 'down'">
              {{ text }}%
            </trend>
          </span>
        </a-table>
      </div>
    </div> 

    <div style="border: solid 1px #E2727F;border-radius: 10px;margin-top: 20px;">
      <div style="display: flex;width: 100%;padding-top: 10px;padding-left: 10px;padding-bottom: 10px;">
        <div style="width: 50%;font-weight: 600;">盒子订单</div>
        <div style="width: 50%;text-align: right;text-decoration:underline;padding-right: 10px;">查看全部</div>
      </div>
      <div class="ant-table-wrapper">
        <a-table
          row-key="index"
          size="small"
          :columns="searchTableColumns"
          :dataSource="searchData"
          :pagination="{ pageSize: 5 }"
        >
          <span slot="range" slot-scope="text, record">
            <trend :flag="record.status === 0 ? 'up' : 'down'">
              {{ text }}%
            </trend>
          </span>
        </a-table>
      </div>
    </div> 

    <div style="height: 20px;"></div>
  </page-view>
</template>

<script>
    import {
        timeFix
    } from '@/utils/util'
    import {
        mapState
    } from 'vuex'
    import {
        PageView
    } from '@/layouts'
    import HeadInfo from '@/components/tools/HeadInfo'
    import {
        Radar
    } from '@/components'
    const DataSet = require('@antv/data-set')
    const searchData = []
    for (let i = 0; i < 50; i += 1) {
        searchData.push({
            no: "10" + (i + 1),
            keyword: `客房送物`,
            count: '2022-02-25 09:14:22',
            range: '已处理',
            status: '已处理'
        })
    }
    export default {
        name: 'Workplace',
        components: {
            PageView,
            HeadInfo,
            Radar
        },
        data() {
            return {
                timeFix: timeFix(),
                avatar: 'https://img0.baidu.com/it/u=1699929098,2318793389&fm=253&fmt=auto&app=120&f=JPEG?w=594&h=320',
                user: {},

                projects: [],
                loading: true,
                radarLoading: true,
                activities: [],
                teams: [],
                searchData: searchData,
                searchTableColumns: [{
                    dataIndex: 'no',
                    title: '房号',
                    align: 'center',
                }, {
                    dataIndex: 'keyword',
                    title: '服务类型',
                    align: 'center',
                }, {
                    dataIndex: 'count',
                    title: '时间',
                    align: 'center',
                }, {
                    dataIndex: 'range',
                    title: '状态',
                    align: 'center',
                }],
                radarData: []
            }
        },
        computed: {
            ...mapState({
                nickname: (state) => state.user.nickname,
                welcome: (state) => state.user.welcome
            }),
            userInfo() {
                return this.$store.getters.userInfo
            }
        },
        created() {
            this.user = this.userInfo
            this.avatar = "https://img0.baidu.com/it/u=1699929098,2318793389&fm=253&fmt=auto&app=120&f=JPEG?w=594&h=320"; // process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/preview?id=' + this.userInfo.avatar
        },
        mounted() {
            this.getProjects()
            this.getActivity()
            this.getTeams()
            this.initRadar()
        },
        methods: {
            getProjects() {
                this.projects = [{
                    id: 1,
                    cover: 'https://img0.baidu.com/it/u=996670317,1773497023&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                    title: '1-101',
                    description: '暂无需求',
                    status: 1,
                    updatedAt: '2018-07-26 00:00:00'
                }, {
                    id: 2,
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
                    title: 'Angular',
                    description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
                    status: 1,
                    updatedAt: '2018-07-26 00:00:00'
                }, {
                    id: 3,
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
                    title: 'Ant Design',
                    description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
                    status: 1,
                    updatedAt: '2018-07-26 00:00:00'
                }, {
                    id: 4,
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
                    title: '物享云',
                    description: '那时候我只会想自己想要什么，从不想自己拥有什么',
                    status: 1,
                    updatedAt: '2018-07-26 00:00:00'
                }, {
                    id: 5,
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
                    title: 'Bootstrap',
                    description: '凛冬将至',
                    status: 1,
                    updatedAt: '2018-07-26 00:00:00'
                }, {
                    id: 6,
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png',
                    title: 'Vue',
                    description: '生命就像一盒巧克力，结果往往出人意料',
                    status: 1,
                    updatedAt: '2018-07-26 00:00:00'
                }]
                this.loading = false
            },
            getActivity() {
                this.activities = [{
                    id: 1,
                    user: {
                        nickname: '@name',
                        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
                    },
                    project: {
                        name: '白鹭酱油开发组',
                        action: '更新',
                        event: '番组计划'
                    },
                    time: '2018-08-23 14:47:00'
                }, {
                    id: 1,
                    user: {
                        nickname: '蓝莓酱',
                        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png'
                    },
                    project: {
                        name: '白鹭酱油开发组',
                        action: '更新',
                        event: '番组计划'
                    },
                    time: '2018-08-23 09:35:37'
                }, {
                    id: 1,
                    user: {
                        nickname: '@name',
                        avatar: '@image(64x64)'
                    },
                    project: {
                        name: '白鹭酱油开发组',
                        action: '创建',
                        event: '番组计划'
                    },
                    time: '2017-05-27 00:00:00'
                }, {
                    id: 1,
                    user: {
                        nickname: '曲丽丽',
                        avatar: '@image(64x64)'
                    },
                    project: {
                        name: '高逼格设计天团',
                        action: '更新',
                        event: '六月迭代'
                    },
                    time: '2018-08-23 14:47:00'
                }, {
                    id: 1,
                    user: {
                        nickname: '@name',
                        avatar: '@image(64x64)'
                    },
                    project: {
                        name: '高逼格设计天团',
                        action: 'created',
                        event: '六月迭代'
                    },
                    time: '2018-08-23 14:47:00'
                }, {
                    id: 1,
                    user: {
                        nickname: '曲丽丽',
                        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
                    },
                    project: {
                        name: '高逼格设计天团',
                        action: 'created',
                        event: '六月迭代'
                    },
                    time: '2018-08-23 14:47:00'
                }]
            },
            getTeams() {
                this.teams = [{
                    id: 1,
                    name: '科学搬砖组',
                    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
                }, {
                    id: 2,
                    name: '程序员日常',
                    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png'
                }, {
                    id: 1,
                    name: '设计天团',
                    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png'
                }, {
                    id: 1,
                    name: '中二少女团',
                    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png'
                }, {
                    id: 1,
                    name: '骗你学计算机',
                    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png'
                }]
            },
            initRadar() {
                this.radarLoading = true
                const dv = new DataSet.View().source(
                    [{
                        item: '引用',
                        '个人': 70,
                        '团队': 30,
                        '部门': 40
                    }, {
                        item: '口碑',
                        '个人': 60,
                        '团队': 70,
                        '部门': 40
                    }, {
                        item: '产量',
                        '个人': 50,
                        '团队': 60,
                        '部门': 40
                    }, {
                        item: '贡献',
                        '个人': 40,
                        '团队': 50,
                        '部门': 40
                    }, {
                        item: '热度',
                        '个人': 60,
                        '团队': 70,
                        '部门': 40
                    }, {
                        item: '引用',
                        '个人': 70,
                        '团队': 50,
                        '部门': 40
                    }]
                )
                dv.transform({
                    type: 'fold',
                    fields: ['个人', '团队', '部门'],
                    key: 'user',
                    value: 'score'
                })

                this.radarData = dv.rows
                this.radarLoading = false
            }
        }
    }
</script>

<style lang="less" scoped>
    .box1 {
        background: linear-gradient(90deg, rgb(245, 34, 45) 0%, rgb(245, 34, 45) 100%);
        margin: 0rpx;
        border-radius: 0rpx;
        color: white;
        width: 120px;
        height: 80px;
        border-radius: 10px;
        text-align: center;
    }
    
    .project-list {
        .card-title {
            font-size: 0;
            a {
                color: rgba(0, 0, 0, 0.85);
                margin-left: 12px;
                line-height: 24px;
                height: 24px;
                display: inline-block;
                vertical-align: top;
                font-size: 14px;
                &:hover {
                    color: #1890ff;
                }
            }
        }
        .card-description {
            color: rgba(0, 0, 0, 0.45);
            height: 44px;
            line-height: 22px;
            overflow: hidden;
        }
        .project-item {
            display: flex;
            margin-top: 8px;
            overflow: hidden;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            a {
                color: rgba(0, 0, 0, 0.45);
                display: inline-block;
                flex: 1 1 0;
                &:hover {
                    color: #1890ff;
                }
            }
            .datetime {
                color: rgba(0, 0, 0, 0.25);
                flex: 0 0 auto;
                float: right;
            }
        }
        .ant-card-meta-description {
            color: rgba(0, 0, 0, 0.45);
            height: 44px;
            line-height: 22px;
            overflow: hidden;
        }
    }
    
    .item-group {
        padding: 20px 0 8px 24px;
        font-size: 0;
        a {
            color: rgba(0, 0, 0, 0.65);
            display: inline-block;
            font-size: 14px;
            margin-bottom: 13px;
            width: 25%;
        }
    }
    
    .members {
        a {
            display: block;
            margin: 12px 0;
            line-height: 24px;
            height: 24px;
            .member {
                font-size: 14px;
                color: rgba(0, 0, 0, .65);
                line-height: 24px;
                max-width: 100px;
                vertical-align: top;
                margin-left: 12px;
                transition: all 0.3s;
                display: inline-block;
            }
            &:hover {
                span {
                    color: #1890ff;
                }
            }
        }
    }
    
    .mobile {
        .project-list {
            .project-card-grid {
                width: 100%;
            }
        }
        .more-info {
            border: 0;
            padding-top: 16px;
            margin: 16px 0 16px;
        }
        .headerContent .title .welcome-text {
            display: none;
        }
    }
</style>